<template>
	<div class="layout-padding">
		<splitpanes horizontal>
			<pane size="50">
				<div class="layout-padding-auto layout-padding-view">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
						<el-form-item :label="$t('message.messageDate')" prop="messageDate">
							<el-date-picker v-model="messageDate" clearable type="daterange" unlink-panels
								range-separator="To" start-placeholder="Start date" end-placeholder="End date"
								:shortcuts="shortcuts" />
						</el-form-item>
						<el-form-item :label="$t('message.module')" prop="module">
							<el-select v-model="state.queryForm.module" placeholder="Select" style="width: 160px" @change="moduleChange">
								<el-option v-for="item in moduleOptions" :key="item.module" :label="item.module"
									:value="item.module" />
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('message.type')" prop="type">
							<el-select v-model="state.queryForm.type" placeholder="Select" style="width: 160px" >
								<el-option v-for="item in typeOptions" :key="item.type" :label="item.type"
									:value="item.type" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button icon="el-icon-search" type="primary" @click="query"> {{ $t('so.query')
								}}</el-button>
							<el-button icon="refresh"  @click="resetQuery">{{ $t('so.reset')
								}}</el-button>

						</el-form-item>
					</el-form>

					<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
						style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
						:header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow">
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="module" :label="$t('message.module')" show-overflow-tooltip width="80" />
						<el-table-column prop="type" :label="$t('message.type')" show-overflow-tooltip width="80" />
						<el-table-column prop="creationTime" :label="$t('message.creationTime')" show-overflow-tooltip
							width="200" />
						<el-table-column prop="messageTitle" :label="$t('message.messageTitle')" show-overflow-tooltip
							width="280" />
						<el-table-column prop="messageContent" :label="$t('message.messageContent')"
							show-overflow-tooltip />
						<el-table-column prop="messageUrl" :label="$t('message.messageUrl')" show-overflow-tooltip
							width="350" />
					</el-table>

					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
						v-bind="state.pagination" />

				</div>
			</pane>
			<pane size="50">
				<messageReceiver ref="messageReceiverRef" />
			</pane>
		</splitpanes>
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { GetMessages, GetMessageModules, GetMessageType } from '/@/api/platform/digital/message';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import messageReceiver from "./messageReceiver.vue";
const { t } = useI18n();

const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const messageDate = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const messageReceiverRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {

	},
	pageList: GetMessages,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
    typeOptions.value = null;
	getDataList(false);
};

const query = () => {
	state.queryForm.StartDate = messageDate.value ? getYMD(messageDate.value[0]) : '';
	state.queryForm.EndDate = messageDate.value ? getYMD(messageDate.value[1]) : '';
	getDataList();
};
// 点击行的时候触发
const clickRow = (row: any) => {
	messageReceiverRef.value.query(row);
}
const moduleOptions = ref<any[]>([]);
const typeOptions = ref<any[]>([]);
// 初始化数据
onMounted(() => {
	GetMessageModules().then((res) => {
		moduleOptions.value = res.data;
  });
});
const moduleChange = (value) => {
  if (value == null || value == 'undefined') {
    typeOptions.value = null;
    return;
  }
  state.queryForm.type = null;
  GetMessageType({ "Module": value }).then((res) => {
    typeOptions.value = res.data;
  });
}
</script>